<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta HTTP-EQUIV="Pragma" CONTENT="no-cache">
    <meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
    <meta HTTP-EQUIV="Expires" CONTENT="0">
    <link href="../pic/logo.ico" rel="shortcut icon">
    <link rel="stylesheet" href="../lib/element/index.css">
    <link rel="stylesheet" href="../../node_modules/animate.css/animate.min.css">
    <link href="../lib/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../common/common.css">
    <title>接口分享</title>
</head>
<body>
<div class="container" id="app"  v-cloak>
    <el-row class="row" style="padding: 15px 10px 10px 0;background-color: white;font-size: 20px;font-weight: bold;">
        <el-row class="row" style="height: 50px;border-bottom: 1px gray solid">
            <el-col class="col" :span="4">

            </el-col>
            <el-col class="col" :span="16" style="text-align:center;line-height: 50px;color: #50bfff;font-size: 30px">
                {{interface.name}}
            </el-col>
            <el-col class="col" :span="4" style="text-align: center;line-height: 50px">

            </el-col>
        </el-row>
        <el-row class="row" style="padding:0 10px;height: 50px;line-height: 50px;color: #50a3ff">
            Method：
        </el-row>
        <el-row class="row" style="padding:0 30px;" :style="{color:methodColor(interface.method)}">
            {{interface.method}}
        </el-row>
        <el-row class="row" style="padding:0 10px;height: 50px;line-height: 50px;color: #50a3ff">
            Path：
        </el-row>
        <el-row class="row" style="padding:0 30px;color: #ff1a27">
            {{interface.url}}
        </el-row>
        <el-row class="row" style="padding:0 10px;height: 50px;line-height: 50px;color: #50a3ff">
            工程：
        </el-row>
        <el-row class="row" style="padding:0 30px;">
            {{interface.project?interface.project.name:""}}
        </el-row>
        <el-row class="row" style="padding:0 10px;height: 50px;line-height: 50px;color: #50a3ff">
            分组：
        </el-row>
        <el-row class="row" style="padding:0 30px;">
            {{interface.group?interface.group.name:""}}
        </el-row>
        <el-row class="row" style="padding:0 10px;height: 50px;line-height: 50px;color: #50a3ff">
            开发状态：
        </el-row>
        <el-row class="row" style="padding:0 30px;">
            {{interface.finish==1?"开发完成":(interface.finish==2?"已废弃":"开发中")}}
        </el-row>
        <el-row class="row" style="padding:0 10px;height: 50px;line-height: 50px;color: #50a3ff">
            描述：
        </el-row>
        <el-row class="row" style="padding:0 30px;">
            {{interface.remark?interface.remark:"无"}}
        </el-row>
        <el-tabs type="card" style="margin-top: 20px" v-model="index">
            <template v-for="(item, index) in param">
                <el-tab-pane :key="item.id"  :label="item.name" :name="index">
                    <el-row class="row" style="padding:0 10px;height: 50px;line-height: 50px;color: #50a3ff" v-if="paramSave && paramSave.length>0">
                        Restful Param:
                    </el-row>
                    <el-row class="row" style="padding:0 30px;" v-if="paramSave && paramSave.length>0">
                        <table style="width: 100%;font-size: 17px;border-collapse: collapse" border="1" bordercolor="#ddd">
                            <thead style="background-color: #50a3ff;color:white;text-align: center;vertical-align: middle">
                            <td style="width: 30%">
                                名称
                            </td>
                            <td style="width: 70%">
                                备注
                            </td>
                            </thead>
                            <tbody>
                            <template v-for="item in paramSave">
                                <tr style="text-align: center;vertical-align: middle;height: 40px;word-break: break-all">
                                    <td style="width: 30%">
                                        {{item.name}}
                                    </td>
                                    <td style="width: 70%">
                                        {{item.remark?item.remark:"无"}}
                                    </td>
                                </tr>
                            </template>
                            </tbody>
                        </table>
                    </el-row>
                    <el-row class="row" style="padding:0 10px;height: 50px;line-height: 50px;color: #50a3ff" v-if="querySave.length>0">
                        Query:
                    </el-row>
                    <el-row class="row" style="padding:0 30px;" v-if="querySave.length>0">
                        <table style="width: 100%;font-size: 17px;border-collapse: collapse" border="1" bordercolor="#ddd">
                            <thead style="background-color: #50a3ff;color:white;text-align: center;vertical-align: middle">
                            <td style="width: 30%">
                                名称
                            </td>
                            <td style="width: 20%">
                                是否可选
                            </td>
                            <td style="width: 50%">
                                备注
                            </td>
                            </thead>
                            <tbody>
                            <template v-for="item in querySave">
                                <tr style="text-align: center;vertical-align: middle;height: 40px;word-break: break-all">
                                    <td style="width: 30%">
                                        {{item.name}}
                                    </td>
                                    <td style="width: 20%">
                                        {{item.must?"必选":"可选"}}
                                    </td>
                                    <td style="width: 50%">
                                        {{item.remark?item.remark:"无"}}
                                    </td>
                                </tr>
                            </template>
                            </tbody>
                        </table>
                    </el-row>
                    <el-row class="row" style="padding:0 10px;height: 50px;line-height: 50px;color: #50a3ff" v-if="headerSave.length>0">
                        Http Header:
                    </el-row>
                    <el-row class="row" style="padding:0 30px;" v-if="headerSave.length>0">
                        <table style="width: 100%;font-size: 17px;border-collapse: collapse" border="1" bordercolor="#ddd">
                            <thead style="background-color: #50a3ff;color:white;text-align: center;vertical-align: middle">
                            <td style="width: 30%">
                                Key
                            </td>
                            <td style="width: 30%">
                                Value
                            </td>
                            <td style="width: 40%">
                                备注
                            </td>
                            </thead>
                            <tbody>
                            <template v-for="item in headerSave">
                                <tr style="text-align: center;vertical-align: middle;height: 40px;word-break: break-all">
                                    <td style="width: 30%">
                                        {{item.name}}
                                    </td>
                                    <td style="width: 30%">
                                        {{item.value}}
                                    </td>
                                    <td style="width: 40%">
                                        {{item.remark?item.remark:"无"}}
                                    </td>
                                </tr>
                            </template>
                            </tbody>
                        </table>
                    </el-row>
                    <el-row class="row" style="padding:0 10px;height: 50px;line-height: 50px;color: #50a3ff" v-if="(interface.method=='PUT' || interface.method=='POST' || interface.method=='PATCH') && (bodySave.length>0 || bodyInfo.type==1)">
                        Body:
                    </el-row>
                    <el-row class="row" style="padding:0 30px;" v-if="(interface.method=='PUT' || interface.method=='POST' || interface.method=='PATCH') && (bodySave.length>0 || bodyInfo.type==1)">
                        <table style="width: 100%;font-size: 17px;border-collapse: collapse" border="1" v-if="bodyInfo.type==0" bordercolor="#ddd">
                            <thead style="background-color: #50a3ff;color:white;text-align: center;vertical-align: middle">
                            <td style="width: 30%">
                                名称
                            </td>
                            <td style="width: 20%">
                                类型
                            </td>
                            <td style="width: 20%">
                                是否可选
                            </td>
                            <td style="width: 30%">
                                备注
                            </td>
                            </thead>
                            <tbody>
                            <template v-for="item in bodySave">
                                <tr style="text-align: center;vertical-align: middle;height: 40px;word-break: break-all">
                                    <td style="width: 30%">
                                        {{item.name}}
                                    </td>
                                    <td style="width: 20%">
                                        {{item.type==0?"文本":"文件"}}
                                    </td>
                                    <td style="width: 20%">
                                        {{item.must?"必选":"可选"}}
                                    </td>
                                    <td style="width: 30%">
                                        {{item.remark?item.remark:"无"}}
                                    </td>
                                </tr>
                            </template>
                            </tbody>
                        </table>
                        <el-row v-else-if="bodyInfo.type==1 && bodyInfo.rawType==2">
                            <bodyjsonpreview :index="index" :data="item"></bodyjsonpreview>
                        </el-row>
                        <div class="row" style="margin: 0;padding: 0" v-else>
                            <table style="width: 100%;font-size: 17px;border-collapse: collapse" border="1" bordercolor="#ddd">
                                <thead style="background-color: #50a3ff;color:white;text-align: center;vertical-align: middle">
                                <td style="width: 30%">
                                    类型
                                </td>
                                <td style="width: 70%">
                                    备注
                                </td>
                                </thead>
                                <tbody>
                                <tr style="text-align: center;vertical-align: middle;height: 40px;word-break: break-all">
                                    <td style="width: 30%">
                                        {{bodyInfo.rawType==0?"文本流":"二进制流"}}
                                    </td>
                                    <td style="width: 70%">
                                        {{bodyInfo.rawType==0?(bodyInfo.rawTextRemark?bodyInfo.rawTextRemark:"无"):(bodyInfo.rawFileRemark?bodyInfo.rawFileRemark:"无")}}
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                            <div class="row" style="margin: 10px 0 0 0;padding: 0" v-if="bodyInfo.rawType==0 && bodyInfo.rawText">
                                <span style="font-size: 15px;">文本示例:</span>
                                <pre>{{bodyInfo.rawText}}</pre>
                            </div>
                        </div>
                    </el-row>
                    <el-row class="row" style="padding:0 10px;height: 50px;line-height: 50px;color: #50a3ff" v-if="(outInfo.type==0 && drawMix.length>0) || outInfo.type==1">
                        Result:
                    </el-row>
                    <el-row class="row" style="padding: 0 30px;">
                        <el-row class="row" v-if="outInfo.type==0 && drawMix.length>0">
                            <outjsonpreview :index="index" :data="item"></outjsonpreview>
                        </el-row>
                        <table style="width: 100%;font-size: 17px;border-collapse: collapse" border="1" v-if="outInfo.type==1" bordercolor="#ddd">
                            <thead style="background-color: #50a3ff;color:white;text-align: center;vertical-align: middle">
                            <td style="width: 20%">
                                类型
                            </td>
                            <td style="width: 50%">
                                备注
                            </td>
                            <td style="width: 30%">
                                Mock
                            </td>
                            </thead>
                            <tbody>
                            <tr style="text-align: center;vertical-align: middle;height: 40px;word-break: break-all">
                                <td style="width: 20%">
                                    RAW
                                </td>
                                <td style="width: 50%">
                                    {{outInfo.rawRemark?outInfo.rawRemark:"无"}}
                                </td>
                                <td style="width: 30%">
                                    {{rawMock}}
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </el-row>
                </el-tab-pane>
            </template>
        </el-tabs>
        <el-row class="row" style="height: 100px"></el-row>
    </el-row>
</div>
<script src="../../dist/vendor.bundle.js"></script>
<script src="../lib/element/index.js"></script>
<script src="../../dist/share.js"></script>
</body>
</html>